<template>
  <!-- 做一个 失去焦点 然后有冲突 怎么设计 -->
  <div class="font-mark" >
    <!--  v-loading="markLoading"-->
    <div v-for="(item, index) in annotate" :key="index">
      <div class="new-rect">
        <div class="rect-left">矩形分组- {{ index + 1 }}</div>
        <div class="rect-right">
          <el-button type="success" :icon="Plus" @click.stop="addAnalyseItem(item, index)" />
        </div>
      </div>
      <div v-for="(citem, jx) in item" :key="jx" :style="{ top: citem.distTop + 'px' }" class="annotate-pos">
        <div class="title-del">
          <div class="del-title">
            <el-select v-model="citem.title" placeholder="请选择" size="small" @change="titleChange">
              <el-option v-for="item1 in checkList" :key="item1.id" :label="item1.name" :value="item1.name" />
            </el-select>
          </div>
          <div class="del-del">
            <el-popconfirm width="250" title="确定需要新增异常报告吗？" @confirm="btnUnusual(citem, index, jx)"
              @cancel="btnCancel(citem, index, jx)">
              <template #reference>
                <el-button size="small" type="warning">异常单</el-button>
              </template>
              <!-- <el-button slot="reference" size="small" type="warning">异常单</el-button> -->
            </el-popconfirm>
            <el-popconfirm width="250" title="这是一段批注内容确定删除吗？" @confirm="btnDel(citem, index, jx)"
              @cancel="btnCancel(citem, index, jx)">
              <!-- <i slot="reference" class="el-icon-delete"></i> -->
              <template #reference>
                <el-button size="small" type="danger" icon="Delete"></el-button>
              </template>
            </el-popconfirm>
          </div>
        </div>
        <el-input :ref="`RefInput_index${index}_jx${jx}`" v-model="citem.titleDesc" clearable type="textarea"
        :autosize="{ minRows: 2, maxRows: 40 }"
          placeholder="请输入..."  :disabled="limits === true" @focus="handleInputFocus(citem, index, jx)"
          @blur="handleInputBlur(citem, index, jx)" />
      </div>
    </div>
    <addAbnormal ref="RefAbnormal" :AuditPageList="AuditPageList" :DocumentData="DocumentData" @getAbnormalList="getAbnormalList"></addAbnormal>
  </div>
</template>

<script setup lang='ts'>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { Plus, Delete } from '@element-plus/icons'
import addAbnormal from './addAbnormal.vue'
import abnormalModel from '@/composables/02Review/01ProjectMan/Abnormal';
import { EditType } from '@/type/BaseEnum'
const { rules, dialogModel, RefAbnormal, addAbnormalBtn } = abnormalModel()
const props = defineProps({
  annotate: {
    type: Array as any,
    default: () => []
  },
  checkList: {
    type: Array as any,
    default: () => []
  },
  limits: {
    type: Boolean,
    default: false
  },
  DocumentData: {
    type: Object,
    default: () => { }
  },
  markLoading:{
    type:Boolean,
    default:false
  },
  AuditPageList:{
    type:Array,
    default:()=>[]
  }
})

const emit = defineEmits(['newinput', 'titleChange', 'newSave', 'btnMarkDel','getAbnormalList'])
const getAbnormalList=()=>{
  emit('getAbnormalList')
}
// 新增分析 1 
const addAnalyseItem = (item, index) => {
  console.log(item, index);
  // 添加一个新的input框
  if(props.markLoading) return
      emit('newinput', item, index)
}
// 新增异常 2
const btnUnusual = (citem, index, jx) => {
  if(props.markLoading) return

      RefAbnormal.value?.show(EditType.ADD, citem)
    
}
// 删除分析 3
const btnDel = async (citem, index, jx) => {
  if(props.markLoading) return

    emit('btnMarkDel', citem, index, jx)
}
// 失去焦点保存
const handleInputBlur = (citem, index, jx) => {
  
  // 这个地方出现了问题
    if(!props.markLoading){
      emit('newSave', citem)
    }
}
const btnCancel = (citem, index, jx) => { }
const titleChange = (e) => {
  const arr = props.checkList.filter(item => {
    return item.name === e
  })
  emit('titleChange', arr[0])
}
const handleInputFocus = (citem, index, jx) => { }

</script>
<style scoped lang='scss'>
.font-mark {
  // background-color: red;
  height: 100%;

  .new-rect {
    // background-color: pink;
    display: flex;
    justify-content: space-between;
    height: 40px;
    align-items: center;

    .rect-left {
      // color: #fff;
      font-size: 15px;
      font-weight: 800;
    }
  }

  .annotate-pos {
    width: 100%;
    // position: absolute;
    margin: 5px 0 7px 0;
    margin-bottom: 10px;

    h6 {
      color: #fff;
    }

    .title-del {
      display: flex;
      justify-content: space-between;
      color: #ffffff;

      .del-del {
        cursor: pointer;
        caret-color: transparent;
        font-size: 20px;

        // .el-popover__reference {
        //   margin-right: 10px;
        // }
        :deep(.el-popover) {
          width: 500px !important;
        }
      }
    }
  }
}
</style>